<template>
    <data-form ref="dataFormRef" :model="form" description="定时任务" rule-prop="quartz">
        <v-form-item prop="jobId"/>
        <el-row>
            <el-col :span="12">
                <v-form-item v-model="form.name" prop="name" label="任务名称" required/>
            </el-col>
            <el-col :span="12">
                <v-form-item v-model="form.groupId" prop="groupId" label="任务组"/>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="12">
                <v-form-item v-model="form.beanName" prop="beanName" label="Bean名称" required/>
            </el-col>
            <el-col :span="12">
                <v-form-item v-model="form.methodName" prop="methodName" label="接口名称" required :attrs="{placeholder: '执行的方法名称'}" />
            </el-col>
        </el-row>
        <v-form-item prop="cronExpression" label="时间规则" el="override" required>
            <el-input v-model="form.cronExpression" placeholder="如: 0 0 12 * * ?">
                <template #suffix>
                    <el-link :icon="Position" href="http://cron.qqe2.com/" target="_blank" style="cursor: pointer" :underline="false"/>
                </template>
            </el-input>
<!--            <m-cron v-model="form.cronExpression" :shortcuts="shortcuts" clearable placeholder="请输入Cron定时规则"></m-cron>-->
        </v-form-item>
        <v-form-item v-model="form.params" prop="params" label="参数" :attrs="{placeholder: '任务运行所需参数'}"/>
        <v-form-item v-model="form.remark" prop="remark" label="备注"/>
    </data-form>
</template>

<script lang="ts" setup>
import {ref, nextTick} from "vue";
import {Position} from "@element-plus/icons-vue";
import DataForm from "@/components/data-form/index.vue";
import VFormItem from "@/components/data-form/form-item.vue";
import MCron from '@/components/cron/index.vue';

const date = new Date();
const dataFormRef = ref<InstanceType<typeof DataForm>>();
const shortcuts = ref([
    {
        text: "每天8点和12点 (自定义追加)",
        value: "0 0 8,12 * * ?"
    }
])
const form = ref({
    jobId: null,
    name: '任务编号:' + date.getFullYear() + date.getMonth() + date.getDay() + date.getHours() + date.getMinutes(),
    groupId: null,
    beanName: '',
    methodName: '',
    params: null,
    cronExpression: '',
    remark: null,
    status: '0'
})

// 展示弹窗
const open = (options: OpenFormConfig) => {
    dataFormRef.value?.open(options)
    nextTick(() => {
        if (options.data) {
            Object.keys(form.value).forEach(k => form.value[k] = options.data[k])
        }
    });
};

defineExpose({open})
</script>
